<template>
  <a-form :form="form">
    <a-row :gutter="0">
      <a-col :key="1" :span="24">
        <a-form-item
          label="部门名称"
          :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
          :wrapperCol="{ lg: { span: 20 }, sm: { span: 20 } }"
        >
          <a-input
            :max-length="32"
            placeholder="部门名称"
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入部门名称' }],
                validateTrigger: 'blur',
                validateFirst: true,
              },
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :key="2" :span="24">
        <a-form-item
          label="上级部门"
          :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
          :wrapperCol="{ lg: { span: 20 }, sm: { span: 20 } }"
        >
          <a-tree-select
            v-decorator="[
              'pid',
              {
                rules: [{ required: true, message: '请选择上级部门' }],
                validateTrigger: 'change',
              },
            ]"
            placeholder="请选择上级部门"
            treeDefaultExpandAll
            :treeData="departments"
            :replace-fields="replaceFields"
          ></a-tree-select>
        </a-form-item>
      </a-col>
      <a-col :key="3" :span="24">
        <a-form-item
          label="备注"
          :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
          :wrapperCol="{ lg: { span: 20 }, sm: { span: 20 } }"
        >
          <a-textarea
            placeholder="请输入备注"
            :max-length="70"
            v-decorator="[
              'remark',
              {
                rules: [
                  {
                    max: 70,
                    message: '字数不超过70',
                  },
                ],
              },
            ]"
            :rows="6"
          />
        </a-form-item>
      </a-col>
      <a-col :key="4" :span="24">
        <span style="color: red">{{ error }}</span>
      </a-col>
    </a-row>
  </a-form>
</template>




<script>
export default {
  props: ["departments"],
  data() {
    return {
      form: this.$form.createForm(this),
      error: "",
      replaceFields: {
        title: "name",
        key: "id",
        value: "id",
      },
    };
  },
  methods: {
    
    onSubmit() {
      this.form.validateFields(async (err, values) => {
        console.log(values)
        if (!err) {
          let { status, message } = await this.http(
            "post",
            "/department/create",
            values
          );
          if (status === 1) {
            this.$message.success(`部门${values.name}新增成功!`, 1);
            this.$emit("getList");
            this.$emit("getTree");
            this.$emit("hideCreate");
            this.form.resetFields();
          } else {
            // this.error = msg
            // setTimeout(()=>{this.error = ''},3000)
            this.$message.error(message, 2);
          }
        }
      });
    },
  },
};
</script>

